<template>
  <div>
      <h1>第九题 - 调整颜色</h1>
       <div class="colorBox" ref="colorBox" :style="{backgroundColor:rgb}"></div>
      <div>
        R:<input type="range"  max="250" v-model="r"/> 
        G:<input type="range"  max="250" v-model="g"/>
        B:<input type="range"  max="250" v-model="b"/> 
      </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      r:0,
      g:0,
      b:0
    }
  },
  computed:{
    rgb() {
      return `rgba(${this.r},${this.g},${this.b})`
    }
  }
}
</script>

<style scoped>
.colorBox {
  width: 200px;
  height: 200px;
  border: 1px solid #ccc;
}
</style>